<style lang="scss" scoped>
.cooperation form{
    width:80%;
    margin: auto;
    label::before{
        content: "*  ";
        color: red;
        float: left;
        margin: 2px 5px 0 0;
    }
    input{
        margin-left: 10px;
    }
    textarea{
        width:410px;
        height: 120px;
        margin-left: 10px;
        vertical-align:top
    }
    button{
        width:300px;
        line-height: 30px;
        display: block;
        margin: 20px auto;
        color: #fff;
        background: var(--blue);
    }
}
#kefu ul{
    position:fixed;
    right: 0;
    cursor: pointer;
    top: 300px;
    text-align: center;
    font-size: 12px;
    z-index: 99;
    color: #fff;
    li{
        background: #7DE5F5;
        width:40px;
        height: 45px;
        display: block;
        padding: 6px;
        a{
            display: block;
            text-decoration: none;
            &:hover{
                color: #ddd;
            }
        }
        &:hover{
            background: #73D2E2;
            
        }
        &:first-child,&:nth-child(2){
            background: var(--blue);
            height: 70px;;
            img{
                display: block;
                margin: 0 auto 6px;
            }
            margin-bottom: 8px;
        }
    }
}

</style>

<template>
    <div class="kefu">
        <div id="kefu">
            <ul>
                <li @click="TJ_event('在线客服')">
                    <a href="http://wpa.qq.com/msgrd?v=1&uin=2096345456&site=qq&menu=yes" target="_blank">
                        <img src="@/assets/kefu.svg" >在线客服
                    </a>
                </li>
                <li @click="cooperation_modal=true;TJ_event('加盟合作')">
                    <img src="@/assets/kefu2.svg" >加盟合作
                </li>
                <li v-show="is_nav"><a href="#tool">派智工具</a></li>
                <li v-show="is_nav"><a href="#activity">外观活动</a></li>
                <li v-show="is_nav"><a href="#Q_A">派智问答</a></li>
                <li v-show="is_nav"><a href="#flowControl">一站服务</a></li>
                <li v-show="is_nav"><a href="#agent">撰稿服务</a></li>
                <li v-show="is_nav"><a href="#share">申请体验</a></li>
            </ul>
        </div>

        <div class="dialog cooperation" v-show="cooperation_modal">
            <div class="box">
                <div class="close" @click="cooperation_modal=false">X</div>
                <h3>欢迎您和我们合作，请填写您的需求</h3>
                <form class="form-inline">
                    <div class="form-group" style="float:left">
                        <label for="exampleInputName2">姓名 </label>
                        <input type="text" class="form-control" id="exampleInputName2"  v-model="operation.name">
                    </div>
                    <div class="form-group" style="float:right">
                        <label for="exampleInputEmail2">电话 </label>
                        <input type="email" class="form-control" id="exampleInputEmail2" v-model="operation.tel">
                    </div>
                    <div class="clear"></div>

                    <div class="form-group" style="margin-top:20px;">
                        <label>需求 </label>
                        <textarea class="form-control" rows="3" style="resize:none" v-model="operation.content"></textarea>
                    </div>
                    <button type="button" class="btn" @click="submit">确认提交</button>
                </form>
            </div>
        </div>
    </div>
</template>
<script>
import {add_msg} from "@/assets/api"
export default {
    props:['is_nav'],
    data(){
        return {
            cooperation_modal:false,
            operation:{
                tel:'',
                name:'',
                content:''
            },
        }
    },
    methods:{
        post(url, data, fn) {
            var xhr = new XMLHttpRequest();
            xhr.open("POST", url, true);
            // 添加http头，发送信息至服务器时内容编码类型
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
            xhr.onreadystatechange = function() {
              if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
                fn.call(this, xhr.responseText);
              }
            };
            if(typeof data == 'object'){
                var str = '';
                for(var key in data){
                    str += key+'='+data[key]+'&';
                }
                data = str.replace(/&$/, '');
            }
            xhr.send(data);
        },
        submit(){
            for (const key in this.operation) {
                if(!this.operation[key]){
                    alert('请完整填写')
                    return false
                }
            }
            add_msg(this.operation)
            .then(res=>{
                if(res){
                    alert('提交成功')
                    this.cooperation_modal=false
                    for (const key in this.operation) {
                        this.operation[key]=''
                    }
                }
            })
        }
    }
}
</script>

